<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">
      {{dataDetail.title}}
    </view>
    <!-- 作者日期时间 -->
    <view class="date-box">
      <view class="author">
        {{dataDetail.author}}
      </view>
      <view class="">
        <uni-dateformat :date="dataDetail.publish_date" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
      </view>
    </view>
    <!-- 富文本 -->
    <view class="rich-text">
      <rich-text :nodes="dataDetail.content"></rich-text>
    </view>

    <!-- 阅读量 -->
    <view class="view-counts">
      阅读&nbsp;
      {{dataDetail.view_count}}
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import http from '@/api/index.js'
  import {
    showMsg
  } from '../../utlis/interact';
  import {
    ref
  } from 'vue';
  let id;
  const dataDetail = ref({});
  // 响应式数据，计算属性已可用
  onLoad((options) => {
    id = options.id;

    getNotDetail();
  })
  // 事件回调
  async function getNotDetail() {
    const res = await http('api/bizhi/wallNewsDetail', {
      id
    });

    if (res.errCode !== 0) return showMsg();

    dataDetail.value = res.data;
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 10px;
    
    .date-box {
      display: flex;
      font-size: 14px;
      color: $text-color-second;
      margin-top: 30rpx;

      .author {
        margin-right: 10px;
      }
    }

    .rich-text {
      margin: 30rpx 0;
    }

    .view-counts {
      color: $text-color-second;
    }
  }
</style>